3. 階層的データのビジュアライゼーション

階層的データのビジュアリゼーション

増井俊之

慶應義塾大学 環境情報学部

masui@pitecan.com

2017年10月12日

大きなデータと階層構造

Yahoo! ディレクトリ

ファイルシステム

住所 / 地図

書籍情報

系統樹

階層的なデータの特徴

データの構造や属性がはっきりしている

e.g. 住所

上位/下位がはっきりしている

e.g. 系統樹

階層的なデータの特徴 (Cont'd)

下の階層ほど数が多い

上の階層の方が重要

下の階層ほど具体的

木構造で表現可能

数式の木構造

https://gyazo.com/32469fa66a4ae65b4022aa9718f8f8d3.png

HTMLの木構造

https://gyazo.com/355feecdbfaa01ef0da96bc560b74320.png

木構造の視覚化

下や中心に描く場合もある

根を下に描く (系統樹)

https://gyazo.com/83a76f5aaefd3592b0ccbee02150e4fb.png

系統樹

https://gyazo.com/520100adac7a90a51e822a3401d490b2.png

根を画面の中心に描く

https://gyazo.com/a3b9e76f922bc94bed8a260fa34d2372.png

Lisp program

https://gyazo.com/34aaa559a8b3b38d2c26b49ac1493d60.png

テキストのインデントで表現する

大項目

中項目1

中項目2

小項目

アウトラインエディタ

YAML, Coffee, Python, Occam, ...

Coffee program

http://gyazz.com/UIPedia/ https://gyazo.com/82ff388797cca477161865eb474f8d19.png

あらゆるデータは階層化可能

分類可能 ⇒ 階層化可能

分類の方法

クラスタリング

決定木

属性

辞書でも階層化可能

階層的クラスタリング

while true do

最も近いデータをグループ化

end

デンドログラムを生成

デンドログラム

http://masui.org/8e29cfe0ddb3c4be8c90975b508391ca.png

決定木

データを条件判断を行なう木構造

https://gyazo.com/a00d96e0884109882687afcdafc8f4ba.png

決定木のもとデータ

http://masui.org/8854bb03d28a57147efe4bafd9a5eebd.png

マインドマップ

https://gyazo.com/5f8a2431610cc8029a5956a95ab6fd92.png

木構造のレイアウト

ループが存在しない

⇒ エッジが重ならないように配置可能

ノードが重ならないように工夫

木構造の視覚化技術を網羅的に紹介

https://gyazo.com/24b06de5c93d8e4bf4db4aa2efe11158.png

ファイルシステム

計算機で一番よく使う階層データ

Unixのファイルシステム

https://gyazo.com/e3c2b3f9c7cc08e741b558715148c403.png

ファイルシステムのブラウザ

フォルダをウィンドウ表示

TreeView

ConeTree

フォルダをウィンドウにする

現在のパソコンで最もポピュラーな方式

https://gyazo.com/a4d34097cf906b241f8cb3870ee15fc7.png

MacのDock

https://gyazo.com/f52a885c0fdf92da838ee6275d5e555b.png

TreeView

WindowsのExplorerなど

https://gyazo.com/1075e21eac6b8665321eb4b091712fbe.png

Cone Tree

大きな木を円錐状に3D表示

円錐回転アニメーション

https://gyazo.com/175eeb88e1ce468763e8f3f797f68e83.png

ビデオ: Cone Tree

http://masui.org/031ecbe3d8afed0d00338b871ce6bf4b.png

無限の表現

https://gyazo.com/dd6315efbef37720b282b507d5499071.png

https://gyazo.com/c233444d864cb09b2cdd02d60213caa2.png

フラクタル視覚化

枝の分岐数を考慮して木を描く

枝わかれが少ないときは遠くまで描く

階層構造の多くは自己相似的

⇒ フラクタル的重要度の付加により常に表示量をほぼ一定に制御可能

フラクタル構造

一部と全体が同じ形をしている

木構造で表現できる

https://gyazo.com/c5fe826b0dba6d4b102f007e54a817b5.png

Self-similar shapes

https://gyazo.com/4ec1b6796e4d28d80964bb9d9fb83f49.png

FractalView

大きな階層構造の表示部分を細かく制御

枝の数/枝の長さの制御

https://gyazo.com/c9f9ca303d5cc601756d1f07da259265.png

ファイルサイズ視覚化手法

要望が多いので各種の手法が存在

他の階層構造の視覚化にも利用可能

e.g. 予算データをファイルの大きさにマッピング

Treemap

階層構造を2次元平面にマッピング

大きなに応じて縦分割/横分割を繰り返す

https://gyazo.com/7a4d9163a3843a08562ccd88425bde24.png

http://livedoor.blogimg.jp/hiroset/imgs/f/a/fa2f8e50.png

Video: Treemap

Video: TreemapDecision

https://gyazo.com/f875b6793692b7d466235e41b9b9642b.png

https://gyazo.com/b8023bc4426a31f2b45e07708d93378e.png

http://masui.org/d5d08abf825731f073c7e67b8a47a971.png

https://gyazo.com/99d5711c79e133727169d8dcc10c4b3a.png

https://gyazo.com/bb0087bb020cb744349553b7ad25f70f.png

階層のトップを中心とする同心円表現

サイズに応じて扇型に分割

https://gyazo.com/105523c43eea6892fba4a76694f5a5bc.png

https://gyazo.com/2617744eadb6f89020c9cdba050b9974.png

ファイル視覚化システムの応用

階層的データをファイルシステムにマッピング

ファイル視覚化ツールを利用してデータを視覚化できる

Yahoo情報の視覚化

https://gyazo.com/655e78e7d889f2f63993951a26a86a18.png

Yahoo情報の視覚化

https://gyazo.com/c197069749f0443a3ca7b779c9ac468f.png

国家予算の視覚化

https://gyazo.com/df597f3f71e3cd4303cfac7adce0e2a1.png

ズーミングシステム

Pad

Pad++

Jazz/Piccolo

PhotoMesa

WING

LensBar

Pad

ズーミングインタフェースの先駆

平面を無限に連続的に拡大/縮小して文書等を表現

巨大な階層をなめらかにブラウジング可能

https://gyazo.com/ac6d1d466a3a68d8ddc62ac7849d6f05.png

ビデオ: Pad

Padの拡張

フィルタ機能 / Overview+Detail / etc.

ツールキット化

Jazz, Piccolo

https://gyazo.com/32e11ad6ab6a556209c51a7951c3a1cf.png

PhotoMesa

Piccoloで作った写真ブラウザ

Treemap + ズーミング

https://gyazo.com/e01855e94acbb3876cb94a29e9ce906f.png

ビデオ: PhotoMesa

WING

ズーミングを利用した連続的/可逆的インタフェース

1次元/2次元/3次元ズーミング

各種の属性からの直感的情報検索

https://gyazo.com/c873d6caf7835e2101201a4552f3e610.png

デモ: WING

LensBar

ズーミングによる拡張スクロールバー

動的曖昧検索+非線型ズーミング

検索マッチ結果をスライダバックグラウンドに視覚化

https://gyazo.com/9a3c43aab951436c406e7228aa41d0a0.png

デモ: LensBar

https://gyazo.com/bd2a0dfe3f47e927ebfd6e6367917e9c.png

https://gyazo.com/1e13c164f5cf599c2e796a3281c8d67a.png

ズーミングシステムの特徴

○ なめらかなインタフェースを実現

連続的/可逆的

× 成功例がほとんど無い

× 「砂漠」に迷い込むことがある

△ ズーミング操作は浸透していない

階層データの扱い

脳は階層的に情報を管理していない

人間も階層的理解は難しいかも

ぼんやりしたものを階層化するのは困難

無理矢理階層化は有効なのか?

e.g. マインドマップ

https://gyazo.com/5f8a2431610cc8029a5956a95ab6fd92.png

階層データの限界

構造がきちんとしている場合のみ有効

要素間に任意の関連があると駄目

上位概念/下位概念が必要

階層的データは大抵人為的

分類すると何でも階層データになる

e.g. 人間を体重別に階層データ化可能

階層データの限界 (Cont'd)

各レベルの分類カテゴリが1種類

同じデータをあちこちに配置できない

Gear: 「超」ナビゲーション

https://gyazo.com/ab4ff7c2d44f4af2bb94fae76589f495.png

デモ: Gear

2個のスイッチだけでナビゲーション

階層的でない情報の扱い

ネットワーク視覚化

多属性の視覚化